<a href="javascript:;" onclick="$authVue.openSocialModal()">一键登录</a>
<a href="javascript:;" onclick="$authVue.openLoginModal()">登录</a>
<a href="javascript:;" onclick="$authVue.openRegisterModal()">注册</a>
<a href="javascript:;" onclick="$authVue.logout()">退出</a>
<hr />
<a href="javascript:;">微信登录</a>
<a href="javascript:;">QQ 登录</a>
<a href="javascript:;">微博登录</a>

<!-- template start -->

<div id="ss-auth" class="ss-auth cleanslate" v-bind:style="{ display: form ? '' : 'none !important' }" style="display: none !important;">
  <header class="popupHeader">
    <span class="header_title">{{ title }}</span>
    <span class="modal_close" @click="closeModal"></span>
  </header>

  <section class="popupBody">
    <!-- Social form -->
    <div class="social_login" v-bind:style="{ display: form == 'social' ? '' : 'none !important' }" style="display: none !important;">
      <div>
        <a v-bind:href="apiUrlWeixin" v-bind:style="{ display: apiUrlWeixin ? '' : 'none !important' }" style="display: none !important;" class="social_box">
          <span class="icon weixin"></span>
          <span class="icon_title">微信登录</span>
        </a>

        <a v-bind:href="apiUrlQq" v-bind:style="{ display: apiUrlQq ? '' : 'none !important' }" style="display: none !important;" class="social_box">
          <span class="icon qq"></span>
          <span class="icon_title">QQ 登录</span>
        </a>

        <a v-bind:href="apiUrlWeibo" v-bind:style="{ display: apiUrlWeibo ? '' : 'none !important' }" style="display: none !important;" class="social_box">
          <span class="icon weibo"></span>
          <span class="icon_title">微博登录</span>
        </a>
      </div>

      <div class="centeredText">
        <span>使用账号密码登录</span>
      </div>

      <div class="action_btns">
        <div class="one_half">
          <a href="javascript:;" @click="openLoginModal" class="btn">登 录</a>
        </div>
        <div class="one_half last">
          <a href="javascript:;" @click="openRegisterModal" class="btn">注 册</a>
        </div>
      </div>
    </div>

    <!-- Login form -->
    <div data-vv-scope="login_form" v-bind:style="{ display: form == 'login' ? '' : 'none !important' }" style="display: none !important;">

      <div class="errorText" v-bind:style="{ display: errorMessage ? '' : 'none !important' }" style="display: none !important;">
        {{ errorMessage }}
      </div>

      <label>用户名/邮箱/手机</label>
      <input type="text" name="account" v-validate="'required'" :class="{'is-danger': errors.has('login_form.account') }" v-model="login.account"
      />
      <br />

      <label>密码</label>
      <input type="password" name="password" v-validate="'required'" :class="{'is-danger': errors.has('login_form.password') }"
        v-model="login.password" />
      <br />

      <!-- <div class="checkbox">
        <input id="remember" type="checkbox" />
        <label for="remember">记住用户名</label>
      </div> -->

      <div class="action_btns">
        <div class="one_half">
          <a href="javascript:;" @click="closeModal" class="btn back_btn">取消</a>
        </div>
        <div class="one_half last">
          <a href="javascript:;" @click="loginSubmit" class="btn btn_red">登录</a>
        </div>
      </div>

      <!-- <a href="javascript:;" @click="openFindPasswordModal" class="forgot_password">忘记密码？</a> -->
    </div>

    <!-- Register Form -->
    <div data-vv-scope="register_form" v-bind:style="{ display: form == 'register' ? '' : 'none !important' }" style="display: none !important;">

      <div class="errorText" v-bind:style="{ display: errorMessage ? '' : 'none !important' }" style="display: none !important;">
        {{ errorMessage }}
      </div>

      <label>用户名</label>
      <input type="text" name="userName" v-validate="'required'" :class="{'is-danger': errors.has('register_form.userName') }"
        v-model="register.userName" />
      <br />

      <label>姓名</label>
      <input type="text" name="displayName" v-validate="'required'" :class="{'is-danger': errors.has('register_form.displayName') }"
        v-model="register.displayName" />
      <br />

      <label>邮箱</label>
      <input type="email" name="email" v-validate="'required|email'" :class="{'is-danger': errors.has('register_form.email') }"
        v-model="register.email" />
      <br />

      <label>手机号</label>
      <input type="text" name="mobile" v-validate="{ required: true, regex: /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/ }" :class="{'is-danger': errors.has('register_form.mobile') }"
        v-model="register.mobile" />
      <br />

      <label>密码</label>
      <input type="password" name="password" v-validate="'required'" :class="{'is-danger': errors.has('register_form.password') }"
        v-model="register.password" />
      <br />

      <div class="action_btns">
        <div class="one_half">
          <a href="javascript:;" @click="closeModal" class="btn back_btn">取 消</a>
        </div>
        <div class="one_half last">
          <a href="javascript:;" @click="registerSubmit" class="btn btn_red">注 册</a>
        </div>
      </div>
    </div>

    <!-- Register Success Form -->
    <div class="user_form" v-bind:style="{ display: form == 'registerSuccess' ? '' : 'none !important' }" style="display: none !important;">
      <div class="successText">
        {{ registerSuccessMessage }}
      </div>

      <div class="action_btns">
        <div class="one_half">
          <a href="javascript:;" @click="closeModal" class="btn back_btn">关 闭</a>
        </div>
        <div class="one_half last">
          <a href="javascript:;" @click="openLoginModal" class="btn">登 录</a>
        </div>
      </div>
    </div>

  </section>
</div>

<!-- template end -->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue-2.1.10.min.js"></script>
<script type="text/javascript" src="js/vee-validate-2.0.3.js"></script>
<script type="text/javascript" src="js/axios-0.17.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="cleanslate.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
  var authData = {
    apiUrlRegister: 'http://localhost:88/api/plugins/SS.Login/actions/Register',
    apiUrlLogin: 'http://localhost:88/api/plugins/SS.Login/actions/Login',
    apiUrlLogout: 'http://localhost:88/api/plugins/SS.Login/actions/Logout',
    apiUrlWeixin: 'http://localhost:88/api/plugins/SS.Login/OAuth/Weixin?redirectUrl=http://location:88',
    apiUrlWeibo: 'http://localhost:88/api/plugins/SS.Login/OAuth/Weibo?redirectUrl=http://location:88',
    apiUrlQq: 'http://localhost:88/api/plugins/SS.Login/OAuth/Qq?redirectUrl=http://location:88',
    registerSuccessMessage: '恭喜，注册用户成功',
    loginRedirectUrl: '?success=true',
    logoutRedirectUrl: '?logout=true',
  };
</script>
<script type="text/javascript" src="script.js"></script>